<template>
  <div>
    <!-- 筛选区域 -->
    <el-form :inline="true" :model="queryParams" class="filter-form">
      <el-form-item label="订单编号：">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable />
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-input v-model="queryParams.productName" placeholder="请输入商品名称" clearable />
      </el-form-item>
      <el-form-item label="店铺名称：">
        <el-input v-model="queryParams.shopName" placeholder="请输入店铺名称" clearable />
      </el-form-item>
      <el-form-item label="买家昵称：">
        <el-input v-model="queryParams.buyerName" placeholder="请输入买家昵称" clearable />
      </el-form-item>
      <el-form-item label="收货人：">
        <el-input v-model="queryParams.receiver" placeholder="请输入收货人姓名" clearable />
      </el-form-item>
      <el-form-item label="配送员：">
        <el-input v-model="queryParams.deliveryMan" placeholder="请输入配送员姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号：">
        <el-input v-model="queryParams.phone" placeholder="请输入任意人手机号" clearable />
      </el-form-item>
      <el-form-item label="创建时间：">
  <el-select v-model="queryParams.createTime" placeholder="全部" style="width: 150px">
    <el-option label="全部" value="" />
    <el-option label="本月内" value="this_month" />
    <el-option label="近三个月" value="last_3_months" />
    <el-option label="今年内" value="this_year" />
    <el-option label="2024年" value="2024" />
    <el-option label="2023年" value="2023" />
    <el-option label="2023年以前" value="before_2023" />
  </el-select>
</el-form-item>
      <el-form-item label="订单状态：">
  <el-select v-model="queryParams.status" placeholder="全部异常状态" style="width: 180px">
    <el-option label="全部异常状态" value="" />
    <el-option label="未到店预警" value="not_arrived_warning" />
    <el-option label="未离店预警" value="not_left_warning" />
    <el-option label="未送达预警" value="not_delivered_warning" />
    <el-option label="超时未到店" value="timeout_not_arrived" />
    <el-option label="超时未送达" value="timeout_not_delivered" />
    <el-option label="待商家退款" value="pending_refund" />
    <el-option label="商家拒绝退款" value="refuse_refund" />
  </el-select>
</el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">清除条件</el-button>
      </el-form-item>
    </el-form>
    <!-- 这里是全部订单的内容 -->
    <p>全部订单内容</p>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const queryParams = reactive({
  orderNo: '',
  productName: '',
  shopName: '',
  buyerName: '',
  receiver: '',
  deliveryMan: '',
  phone: '',
  createTime: '',
  status: ''
})

function handleSearch() {
  // 这里写搜索逻辑
  // console.log(queryParams)
}
function handleReset() {
  Object.keys(queryParams).forEach(key => queryParams[key] = '')
}
</script>

<style scoped>
.filter-form {
  margin-bottom: 20px;
}
</style>
